<template>
  <div id="register" class="register">
    <yd-navbar slot="navbar" fixed>
      <a @click="$router.go(-1)" slot="left">
        <yd-navbar-back-icon></yd-navbar-back-icon>
      </a>
      <span slot="center" style="font-size:18px">注册</span>
    </yd-navbar>

    <div class="content-register">
      <div class="space-20">
      </div>
      <yd-cell-group>
        <yd-cell-item>
          <span slot="left">*用户名：</span>
          <yd-input slot="right" required v-model.trim="username" max="20" placeholder="请输入用户名"></yd-input>
        </yd-cell-item>
        <yd-cell-item>
          <span slot="left">*密码：</span>
          <yd-input slot="right" type="password" v-model.trim="password" placeholder="请输入密码"></yd-input>
        </yd-cell-item>
        <!--
        <yd-cell-item arrow type="label">
          <span slot="left">性别：</span>
          <select slot="right">
                <option value=""> 请选择性别</option>
                <option value="1">男</option>
                <option value="2">女</option>
          </select>
        </yd-cell-item>
        -->
        <div class="space-20">
        </div>
        <yd-cell-item arrow type="label">
          <span slot="left">密保问题：</span>
          <select slot="right">
                <option v-for="item in questions" value="item.value">{{ item.text }}</option>
            </select>
        </yd-cell-item>
        <yd-cell-item>
          <span slot="left">密保答案：</span>
          <yd-input slot="right" v-model.trim="answer" max="20" placeholder="请输入问题答案"></yd-input>
        </yd-cell-item>

        <div class="space-20">
        </div>
        <yd-checkbox v-model="checkbox">同意协议</yd-checkbox>
        <yd-button-group>
          <yd-button size="large" @click.native="register" bgcolor="#2196f3" color="#fff">注册</yd-button>
        </yd-button-group>
      </yd-cell-group>
      <div class="space-20">
      </div>
      （注册管理员请致电：888888）<br>
      <router-link to="/user/login">
        <=有 账号，返回登录！ </router-link>


    </div>
  </div>
</template>

<script>
  import axios from '../../axios'
  import baseService from '../../axios/'

  export default {
    name: 'register',
    data() {
      return {
        msg: 'Welcom to register !',
        username: '',
        password: '',
        checkbox: false,
        questions: [{
            value: "",
            text: "请选择密保问题"
          },
          {
            value: 1,
            text: "你最喜欢的一种颜色。"
          },
          {
            value: 2,
            text: "你最喜欢的老师的名字。"
          },
          {
            value: 3,
            text: "你家乡的省会名字。"
          }
        ],
        answer: ''
      }
    },
    methods: {

      register: function () {
        if (this.username === '' || this.password === '') {
          this.$dialog.alert({
            mes: '用户名，密码不能为空！'
          });
          return
        }
        let param = new URLSearchParams();
        let username = this.username;
        let password = this.password;
        param.append("username", username);
        param.append("password", password);
        param.append("role", 0) //普通用户注册
        baseService.post('/user/register.do', param).then((res) => {
          // this.msg = res.data.msg;
          this.$dialog.alert({
            mes: res.data.msg
          })
        })
      }

    }
  }

</script>

<style>
  .register {
    background-color: #FCFCFC !important;
    height: 100%;
    position: fixed;
    width: 100%;
  }
  .register .content-register{
    margin-top:13%;
    position: fixed;
    height:100%;
    width:100%;
  }
  #logo img {
    margin: 50px auto;
  }

  .yd-checkbox {
    margin: 20px;
    float: left;
  }

  .yd-checkbox-icon {
    width: 15px !important;
    height: 15px !important;
  }

  .yd-checkbox-text {
    font-size: 12px;
  }

</style>
